import React,   { useState, useEffect  } from 'react';
import { Card, Table, Button, Popconfirm,message } from "antd";
import { get,del } from "../../../util/request"




var dataSource = [
  {
    id: 1,
    name: "view",
    method: ["GET","POST"],
    labels:"A:A"
  }
];

function List(props) {

  const [isLoading, setLoading] = useState(true);
  const [pokemon, setPokemon] = useState();

  const colusm = [
    {
      "title": "序号",
      "key": "id",
      "width": 80,
      "allign": "center",
      render: (txt, record, index) => index + 1
    },
    { "title": "Role名称", "dataIndex": "name" },
    { "title": "请求类型", "dataIndex": "method" },
    { "title": "允许标签", "dataIndex": "labels" },
    {
      "title": "操作",
      render: (txt, record, index) => {
        return <div>
          <Button type="primary" size="small"
            onClick={() => {
              // 跳转到edit页面，传递id作为参数
              props.history.push(`/admin/role/edit/${record.name}`);
            }}
          >
            修改
          </Button>
          <Popconfirm
            title="确定删除此项？"
            okText="Yes"
            cancelText="No"
            onCancel={() => console.log("用户取消删除")}
            onConfirm={() => {
              del("/v1/rolegrant/delete?name="+record.name).then(data=>{
                if (data.data.code !=1){
                  message.success("删除成功")
                  window.location.reload()
                }else{
                  console.log(data.data.msg)
                  message.error("删除失败"+data.data.msg)
                }
                
      
              }).catch(err =>{
                  message.error("删除失败",err)
              })
            }
            }
          >
            <Button 
            type="danger" 
            size="small"
        
            >
              删除
            </Button>
          </Popconfirm>
        </div>
      }
    }
  ]

  useEffect(() => {
    get("/v1/rolegrant/getlist").then(response => {
      for (let i = 0; i < response.data.data.length; i++) {
        if (response.data.data[i]["labels"] != undefined) {
          response.data.data[i]["labels"] = JSON.stringify(response.data.data[i]["labels"])
        }
      }

      setPokemon(response.data.data);
      setLoading(false);
    });
  }, []);

  if (isLoading) {
    return <div className="App">Loading...</div>;
  }


  return (
    <Card title="角色列表" extra={
      <Button
        type="primary"
        size="small"
        onClick={() => props.history.push("/admin/role/edit")}
      >
        新增
      </Button>
    }>
      <Table
        columns={colusm}
        bordered
        dataSource={pokemon}
      ></Table>
    </Card>
  );
}
export default List;

